<template>
  <div class="m-busines">
    <div class="form_group">
        <div>
            <el-dropdown>
                <span class="el-dropdown-link">
                状态<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>已使用</el-dropdown-item>
                    <el-dropdown-item>未使用</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-input
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
                v-model="state.input1"
                style="width: 150px"
                size="mini"
            >
            </el-input>            
        </div>
        <el-button type="primary" size="mini" style="float:right" @click="newBusines"
        >新增</el-button>
    </div>
    <div class="table_group">
      <StaffMgl
        :cols="state.colsData"
        :tableData="state.tableData"
        :showborder="false"
      >
        <template #icon>
          <i class="el-icon-search" @click="search"></i>
          <i class="el-icon-setting" @click="edit"></i>
          <i class="el-icon-s-platform" @click="cfgDefault"></i>
          <i class="el-icon-delete" @click="deleteItem"></i>
        </template>
      </StaffMgl>
      <Confirm />
      <Dialog :showDialog="state.isshow" @close="getClose" Title="查看规则">
        <template #content>
          <el-tabs v-model="state.activeName" @tab-click="handleClick">
            <el-tab-pane label="规则信息" name="first">
              <p>规则名称:生产厂家</p>
              <p>规则描述:适用于生产企业</p>
              <el-table
                :data="state.tableDataSearch"
                border
                style="width: 100%"
              >
                <el-table-column
                  v-for="item in state.tabcols"
                  :key="item.index"
                  :prop="item.props"
                  :label="item.label"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="商家信息" name="second">
              <p>共 {{}} 个商家</p>
              <el-table :data="state.tableDataBrand" border style="width: 100%">
                <el-table-column
                  v-for="item in state.tabBrand"
                  :key="item.index"
                  :prop="item.props"
                  :label="item.label"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </template>
      </Dialog>
      <Confirm
        :showConfirm="state.isConfirm"
        @close="getClose"
        Title="确认删除该规则吗？"
      />
      <Confirm
        :showConfirm="state.isDefault"
        @close="getClose"
        Title="确认要把该规则设置为默认规则吗？"
      />
    </div>
    <div class="page_group"></div>
  </div>
</template>

<script>
import StaffMgl from "@/components/StaffManagetList";
import Confirm from "../components/confirm";
import Dialog from "../components/dialog.vue";

import { reactive } from "vue";
import {useRouter} from "vue-router";


export default {
  components: {
    StaffMgl,
    Confirm,
    Dialog,
  },
  setup() {
    let state = reactive({
      input1: "",
      isshow: false,
      isConfirm: false,
      isDefault: false,

      activeName: "first",
      colsData: [
        { props: "", label: "规则编号" },
        { props: "", label: "规则名称" },
        { props: "", label: "规则描述" },
        { props: "", label: "收费项" },
        { props: "", label: "商家数量" },
        { props: "", label: "状态" },
        { props: "", label: "创建人" },
      ],
      tableData: [{}],
      tableDataSearch: [],
      tabcols: [
        { props: "w", label: "收费项" },
        { props: "l", label: "收费类型" },
        { props: "b", label: "收费金额" },
      ],
      tableDataBrand: [],
      tabBrand: [
        { props: "w", label: "商家编号" },
        { props: "l", label: "商家名称" },
        { props: "b", label: "加入日期" },
      ],
    });
    //挂在路由
    const router = useRouter();
    //父组件状态变更
    function getClose(params) {
      state.isshow = params;
      state.isConfirm = params;
      state.isDefault = params;
    }
    //查看
    function search() {
      state.isshow = true;
    }
    //编辑
    function edit() { 
        router.push('./newbusines?=edit')
    }
    // 设置默认
    function cfgDefault() {state.isDefault = true}
    //删除当前项
    function deleteItem() {state.isConfirm = true}
    //跳转到新增
    function newBusines(){
        router.push('./newbusines?=new')
    }

    return {
      state,
      search,
      edit,
      cfgDefault,
      deleteItem,
      getClose,
      newBusines
    };
  },
};
</script>

<style lang="less" scoped>
.m-busines {
  display: flex;
  flex-direction: column;
  .form_group {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .table_group {
    flex: 8;
  }
  .page_group {
    flex: 1;
  }
}
</style>
